<template>
  <div class="wave-background">
    <div
      v-for="(layer, index) in layers"
      :key="index"
      class="wave-layer"
      :class="`wave-${index + 1}`"
      :style="getLayerStyle(index)"
    ></div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  config: {
    type: Object,
    default: () => ({
      layers: 3,
      speed: 'slow',
      color: '#0078d4',
      amplitude: 'medium'
    })
  }
})

const layers = computed(() => {
  return Array.from({ length: props.config.layers }, (_, i) => i)
})

const getLayerStyle = (index) => {
  const speedMap = {
    slow: [20, 25, 30],
    medium: [15, 20, 25],
    fast: [10, 15, 20]
  }
  
  const speeds = speedMap[props.config.speed] || speedMap.medium
  const duration = speeds[index % 3]
  
  let backgroundColor
  if (props.config.color === 'gradient') {
    const colors = ['rgba(102, 126, 234, 0.3)', 'rgba(118, 75, 162, 0.3)', 'rgba(240, 147, 251, 0.3)']
    backgroundColor = colors[index % 3]
  } else {
    const opacity = 0.3 - index * 0.05
    backgroundColor = props.config.color.replace(')', `, ${opacity})`)
  }
  
  return {
    backgroundColor,
    animationDuration: `${duration}s`,
    animationDelay: `${-index * 3}s`,
    bottom: `${index * 20}px`
  }
}
</script>

<style scoped>
.wave-background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
}

.wave-layer {
  position: absolute;
  left: 0;
  width: 200%;
  height: 100%;
  animation: wave linear infinite;
}

.wave-layer::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  pointer-events: none;
}

@keyframes wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1);
  }
  50% {
    transform: translateX(-25%) translateZ(0) scaleY(0.8);
  }
  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1);
  }
}
</style>

